import React, { useEffect, useState } from 'react';
import {
  connect,
  //  useDispatch, Link
} from 'umi';
import { Input, Button, Table, Popconfirm, Form, Row, Col } from 'antd';
import PageTopFormContent from '@/components/PageTopFormContent';
import PaginationCommon from '@/components/PaginationCommon';

import styles from './ResAuth.less';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const ResAuth = (props) => {
  const [form] = Form.useForm();

  const handleSearch = () => {
    const { validateFields } = form;
    validateFields().then((values) => {
      // const param = { ...values }
      // setFormData(param);
      // setCurrenPage(1);
    });
  };

  const data = [
    {
      id: 1,
      roleName: '张三',
      stuffNumber: 10,
      status: 0,
    },
    {
      id: 2,
      roleName: '李四',
      stuffNumber: 6,
      status: 1,
    },
  ];
  const [dataList] = useState(data);

  // const dispatch = useDispatch();

  useEffect(() => {
    // dispatch({
    //   type: ''
    // }).then(res => {
    // })
    // dispatch({
    //   type: ''
    // })
  }, []);

  const columns = [
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName',
    },
    {
      title: '员工数',
      dataIndex: 'stuffNumber',
      key: 'stuffNumber',
    },
    {
      title: '授权状态',
      dataIndex: 'status',
      key: 'status',
      render: text => (
        <span style={{ color: `${text === 1 ? '#1E8E3E' : '#999999'}` }}>
          ●
          {text === 0 ? '未授权' : '已授权'}
        </span>
      ),
    },
    {
      title: '操作',
      dataIndex: '',
      key: '',
      render: text => (
        <Popconfirm
          title="你确定要取消授权该角色吗?"
          // onConfirm={() => handleDelete(record.key)}
        >
          <a>取消授权</a>
        </Popconfirm>
      ),
    },
  ];

  return (
    <div className={styles.root}>
      <PageTopFormContent
        title={
          <div style={{display:"flex",justifyContent:"space-between"}}>
                <div>授权</div>
                <div className={styles.infoDetail}>
                  <div>
                    <span className={styles.spanLabel}>编号:</span>
                    <span className={styles.code}>C0021</span>
                  </div>
                  <div>
                    <span className={styles.spanLabel}>权限名称:</span>
                    <span>XXX菜单 --新增</span>
                  </div>
                </div>
          </div>
        }
        content={(
          <Form {...layout} form={form} name="advanced_search">
            <Row gutter={[32, 16]}>
              <Col className="gutter-row" span={6}>
                <Form.Item name="name" label="用户账号">
                  <Input placeholder="请输入用户账号" />
                </Form.Item>
              </Col>
              <Col className="gutter-row" span={6}>
                <Form.Item name="name" label="角色名称">
                  <Input placeholder="请输入角色名称" />
                </Form.Item>
              </Col>

              <Col className="gutter-row" span={6}>
                <Form.Item wrapperCol={{ ...layout.wrapperCol }}>
                  <Button type="primary" onClick={handleSearch}>
                    查询
                  </Button>
                </Form.Item>
              </Col>
              <Col className="gutter-row" span={6}>
                
              </Col>
            </Row>
          </Form>
        )}
      />
      <div className={styles.tableWapper}>
        <div className={styles.listHead}>
          <div className={styles.listTitle}>授权角色列表</div>
          <Button type="primary"> 取消授权</Button>
        </div>
        <div className={styles.listTable}>
          <Table columns={columns} dataSource={dataList} pagination={false} />
        </div>
        <PaginationCommon style={{ textAlign: 'right' }} />
      </div>
    </div>
  );
};

export default connect(state => state)(ResAuth);
